<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<div id="app">
  <h2>用户列表</h2>
  <button @click="createUser">创建用户</button>
  <button @click="reverse">倒序数组</button>
  <ul>
    <!-- index作为第二个参数，用以标识下标 -->
    <li v-for="(user, index) in users">
      用户{{ index + 1 }}
      <ul>
        <!-- key作为第二个参数，用以标识键名 -->
        <li v-for="(value, key) of user">
          <strong style="display: inline-block;width: 60px;">{{ key }}:</strong>
          <span>{{ value }}</span>
        </li>
      </ul>
    </li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script type="text/javascript">
  let vm = new Vue({
    el: '#app',
    data () {
      return {
        users: []
      }
    },
    methods: {
      random (factor, base) { // 根据乘积因子和基数生成随机整数
        return Math.floor(Math.random() * (factor || 1)) + (base || 0)
      },
      createUser () {
        // 获取 name 大写首字母
        let fLetter = 'BJHK'[this.random(3.999)]
        // 随机截取 name 字符串
        let nameStr = 'abcdefghijklmnopqrstuvwxyz'
        let bLetters = nameStr.substr(this.random(19.999), this.random(3.999, 3))
        let user = {
          name: fLetter + bLetters,
          age: this.random(5.999, 25),
          city: ['Chicago', 'Sydney', 'ShenZhen', 'HangZhou'][this.random(3.999)]
        }
        console.log('--------------- 创建用户 ---------------\n', user)
        this.users.push(user)
      },
      reverse () {
        console.log('--------------- 倒序列表 ---------------')
        console.log('Before:', this.users.map(user => user.name))
        this.users.reverse()
        console.log('After:', this.users.map(user => user.name))
      }
    }
  })
</script>
</body>
</html>